<template>
  <view
    class="mycard"
    @click="() => $emit('handleDaily')"
    :style="{ height: cardData.height }"
  >
    <view class="card-left">
      <view class="card-title">
        <text class="title">{{ cardData.title }}</text>
      </view>
      <view class="card-info">
        <text
          class="count"
          style="margin-right: 10rpx; font-size: 36rpx; font-weight: bold"
        >
          {{ cardData.count }}
        </text>
        <text class="title">
          {{ cardData.info }}
        </text>
      </view>
      <view
        v-if="cardData.title !== '收到日报'"
        style="position: absolute; width: 65%; margin-top: 20rpx"
      >
        <u-line-progress
          activeColor="#D82723"
          inactiveColor="#AC9090"
          :percentage="cardData.progress"
          :showText="false"
          height="8"
        ></u-line-progress>
      </view>
    </view>
    <view class="card-right">
      <image
        style="width: 159rpx; height: 172rpx; margin-top: 18rpx"
        :src="cardData.imgSrc"
      ></image>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    cardData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      title: 'Hello',
    }
  },
  onLoad() {},
  methods: {},
}
</script>

<style lang="scss" scoped>
.mycard {
  flex: 1;
  display: flex;
  justify-content: space-between;
  background: #fff1f1;
  border-radius: 10rpx;
  box-shadow: 0px 3rpx 6rpx 0px #b29494;
  box-sizing: border-box;
  position: relative;
}
.mycard .card-left {
  padding-left: 30rpx;
  margin-top: 30rpx;
}
.card-info {
  margin-top: 6rpx;
}
.card-info .title {
  margin: 8rpx 0rpx;
  height: 24rpx;
  font-size: 22rpx;
  font-weight: bold;
  color: #666666;
  line-height: 30rpx;
}
.mycard .card-right {
  position: absolute;
  width: 159rpx;
  height: 172rpx;
  right: -12rpx;
  bottom: 8rpx;
}
.card-title .title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  line-height: 30rpx;
}
.card-view .title {
  height: 22rpx;
  font-size: 22rpx;
  color: #606c81;
  line-height: 30rpx;
}
</style>
